import DisplayObject from './display-object.js'

const assMap = {
  fillStyle: true,
  strokeStyle: true,
  lineWidth: true,
  lineCap: true,
  lineDashOffset: true,
  lineJoin: true,
  miterLimit: true
}

class Graphics extends DisplayObject {
  constructor () {
    super()
    this.cmds = []
    this.currentGradient = null
  }

  clearRect () {
    this.cmds.push(['clearRect', arguments])
    return this
  }

  rect () {
    this.cmds.push(['rect', arguments])
    return this
  }

  clear () {
    this.cmds.length = 0
    return this
  }

  setLineDash () {
   // this.cmds.push(['setLineDash', arguments])
    return this
  }

  strokeRect () {
    this.cmds.push(['strokeRect', arguments])
    return this
  }

  fillRect () {
   // this.cmds.push(['fillRect', arguments])
    return this
  }

  beginPath () {
   // this.cmds.push(['beginPath', arguments])
    return this
  }

  arc () {
   // this.cmds.push(['arc', arguments])
    return this
  }

  closePath () {
   // this.cmds.push(['closePath', arguments])
    return this
  }

  fillStyle () {
   // this.cmds.push(['fillStyle', arguments])
    return this
  }

  fill () {
    //this.cmds.push(['fill', arguments])
    return this
  }

  strokeStyle () {
   this.cmds.push(['strokeStyle', arguments])
    return this
  }

  lineWidth () {
   // this.cmds.push(['lineWidth', arguments])
    return this
  }

  lineCap () {
   // this.cmds.push(['lineCap', arguments])
    return this
  }

  lineDashOffset () {
   // this.cmds.push(['lineDashOffset', arguments])
    return this
  }

  lineJoin () {
    //this.cmds.push(['lineJoin', arguments])
    return this
  }

  miterLimit () {
   // this.cmds.push(['miterLimit', arguments])
    return this
  }

  stroke () {
   // this.cmds.push(['stroke', arguments])
    return this
  }

  moveTo () {
    //this.cmds.push(['moveTo', arguments])
    return this
  }

  lineTo () {
    //this.cmds.push(['lineTo', arguments])
    return this
  }

  bezierCurveTo () {
    //this.cmds.push(['bezierCurveTo', arguments])
    return this
  }

  quadraticCurveTo () {
    //this.cmds.push(['quadraticCurveTo', arguments])
    return this
  }

  createRadialGradient () {
    //this.cmds.push(['createRadialGradient', arguments])
    return this
  }

  createLinearGradient () {
    //this.cmds.push(['createLinearGradient', arguments])
    return this
  }

  addColorStop () {
    //this.cmds.push(['addColorStop', arguments])
    return this
  }

  fillGradient () {
    //this.cmds.push(['fillGradient'])
    return this
  }

  arcTo () {
    //this.cmds.push(['arcTo', arguments])
    return this
  }

  render (ctx) {

    
    this.cmds.forEach(cmd => {
      const methodName = cmd[0]
      if (assMap[methodName]) {
        ctx[methodName] = cmd[1][0]
      } else if (methodName === 'addColorStop') {
        this.currentGradient && this.currentGradient.addColorStop(cmd[1][0], cmd[1][1])
      } else if (methodName === 'fillGradient') {
        ctx.fillStyle = this.currentGradient
      } else {
        //my.alert({content:methodName});
        //ctx.lineWidth = 4;
        //ctx.strokeStyle = 'red';
        // ctx.strokeStyle = 'blue';
        //ctx.setStrokeStyle('blue')

        // var rectData = Array.prototype.slice.call(cmd[1]);
        // ctx.strokeRect(rectData[0], rectData[1], rectData[2], rectData[3]);

        // my.alert({content:Array.prototype.slice.call(cmd[1])});

        let result = ctx[methodName].apply(ctx, Array.prototype.slice.call(cmd[1]))
        if (methodName === 'createRadialGradient' || methodName === 'createLinearGradient') {
          this.currentGradient = result
        }
      }
    })
  }
}

export default Graphics
